<template>
    <div class="returnBack" :class="{ fixed }">
        <van-nav-bar :title="title"  left-arrow :right-text="rightText" @click-left="onClickLeft">
            <template #left>
                <div class="icon">
                    <img class="auto-img" src="../../public/images/songList/向左.png" alt="">
                </div>
            </template>
            <template #right>
                <div class="icon icon2">
                    <img class="auto-img" src="../../public/images/songList/搜索.png" alt="">
                </div>
                <div class="icon ">
                    <img class="auto-img" src="../../public/images/songList/Android更多.png" alt="">
                </div>
            </template>
        </van-nav-bar>
    </div>
</template>

<script>
export default {
    name: "ReturnBack",
    props: {
        //标题
        title: {
            type: String,
            default: ''
        },
        //右侧文本内容
        rightText: {
            type: String,
            default: ''
        },
        //固定导航
        fixed: {
            type: Boolean,
            default: false
        },

        leftText: {
            type: String,
            default: ''
        },

        leftArrow: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        onClickLeft() {
           
            this.$router.back();
        },
        onClickRight() {
            this.$emit('clickright');
        },
    },
}
</script>

<style lang="less" scoped>
// @color: #FCFCFD;

.returnBack {
    .icon{
        width: 25px;
        height: 25px;
    }
    
    .icon2{
        margin-right: 10px;
    }
    .van-nav-bar{
        background-color: transparent;
    }
    [class*=van-hairline]::after{
        border: none;
    }
    // /deep/ .van-nav-bar .van-icon {
    //     color: @color;
    // }

    // /deep/ .van-nav-bar__text {
    //     color: @color;
    // }

    &.fixed {
        position: sticky;
        top: 0;
        z-index: 99;
    }
}
</style>